<template>
    <div class="bgcl">
        <van-nav-bar class="navclass"></van-nav-bar>
        <div class="toppart">
            <div class="info_card">
                <div class="info_content">
                    <img class="info_img_class" :src="user_icon">
                    <div class="info_text">
                        <span v-text="username"></span><span class="zxclass">
                            <img class="signout" @click="signout" src="http://127.0.0.1:8081/signout.svg">
                        </span>
                        <br>
                        <div class="bookselect">
                            <img class="img_class" src="http://127.0.0.1:8081/icon_book.svg">
                        <span v-text="currentBook" class="selectbookitem">请选择课本</span>
                        </div>
                    </div>
                </div>
                <div class="info_card_bottom">
                    <div class="info_card_bottom_content">
                        <span>总场次：{{allTestNumb}}</span>
                        <span style="float:right">当前胜率：{{currentWinPercent}}%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottomclass">
            <Menucard @click.native="gotoChooseBook" iconpath="http://127.0.0.1:8081/%E4%B9%A6.svg" title="选择课本" color="#8b62da" fontcolor="#fcfcfe"></Menucard>
            <Menucard @click.native="gotoPK" iconpath="http://127.0.0.1:8081/%E6%8B%B3%E5%87%BB%E5%A5%97.svg" title="开始PK" color="#a763ca" fontcolor="#fcfcfe"></Menucard>
            <Menucard iconpath="http://127.0.0.1:8081/%E6%8E%92%E8%A1%8C%E6%A6%9C.svg" title="排行榜" color="#7dbe6a" fontcolor="#fcfcfe"></Menucard>
        </div>
    </div>
</template>

<script>
import Menucard from '@/components/menu_card'
export default {
    data:function(){
        return {
            user_icon:this.$store.state.UserPicPath,
            username:this.$store.state.UserName,
            currentBook:this.$store.state.currentBookName,
            allTestNumb:0,
            currentWinPercent:0
        }
    },
    components:{
        Menucard
    },
    mounted() {
        this.getcurrentBookName()
    },
    methods:{
        gotoChooseBook:function(){
            this.$router.push('/choosebook')
        },
        gotoPK:function(){
            this.$router.push("/startpk")
        },
        getcurrentBookName:function(){
            this.$http.post(this.$config.GetBookNameByID,{
                bookid:this.$store.state.currentBookID
            }).then(res=>{
                this.currentBook=res.data.Mydata;
                this.$store.commit("setcurrentBookName",res.data.Mydata)
            }).catch(err=>{
                this.$toast.fail("网络连接失败！")
            })
        },
        signout:function(){
            this.$store.dispatch('SignOut')
        }
    }
}
</script>

<style scoped>
.bgcl{
    height: 100vh;
    width: 100vw;
    margin: 0px;
    background-image: url("http://127.0.0.1:8081/Back.PNG");
    position: absolute;
    top: 0px;
    left: 0px;
    /* background-color: #3f0047; */
}
.bottomclass{

}
.toppart{
    /* margin-bottom: 0vh; */
}
.info_card{
    /* border: 1px solid red; */
    height: 23vh;
    margin: 1vh 3vw;
    
    background-color: #4898d7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    color: white;
}
.info_content{
    margin: 2vh 3vw;
    /* border: 1p      x solid red; */
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-items: flex-start;
    align-items: center;
}
.info_card_bottom{
    
    background-color: #346a96;
    height: 8vh;
    width: 100%;
    position: relative;
    bottom: 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.info_img_class{
    border-radius: 50%;
    border: 3px solid pink;
    height: 10vh;
}
.info_text{
    padding-left: 20px;
    flex: 1;
    line-height: 2;
}
.selectbookitem{
    line-height: 30px;
}
.bookselect{
    /* border: 1px solid red; */
    display: flex;
    flex-direction: row;
    align-items: center;
}
.img_class{
    height: 20px;
    /* border: 1px solid red; */
    margin-right: 10px;
}
.info_card_bottom_content{
    margin: 2vh 3vw;
    /* border: 1px solid pink; */
}
.navclass{
    background-color: unset;

}
.van-hairline--bottom::after{
    border-bottom-width:0px;
}
.zxclass{
    /* border: 1px solid red; */
    float: right;
    /* height: 2vh; */
    
}
.signout{
    height: 5vh;
}
</style>
